/* 
* 科技有限公司版权所有（）.
* Copyright (c) 2019, and/or its affiliates. All rights reserved.
* @Date: 2020.09.01 22:47.
* @Author 
* @Description  项目 - 订单列表
**/
<template>
  <div class="pr-order-list">
    <el-form :model="ruleForm" ref="ruleForm" label-width="100px" :inline="true">
      <el-form-item label="订单号：" prop="orderId">
        <el-input v-model="ruleForm.orderId" placeholder="请输入订单号" @change="handleOrderChange"></el-input>
      </el-form-item>

      <el-form-item label="用户手机号：" prop="phone">
        <el-input v-model="ruleForm.phone" placeholder="用户手机号" @change="handlePhoneChange"></el-input>
      </el-form-item>

      <el-form-item label="加油站编号：" prop="code">
        <el-input v-model="ruleForm.code" placeholder="加油站编号" @change="handleCodeChange"></el-input>
      </el-form-item>

      <el-form-item label="码值状态：" prop="codeStatus">
        <el-select v-model="ruleForm.codeStatus" placeholder="码值状态" clearable @change="handleCodeStatusChange">
          <el-option label="已核销" value="50"></el-option>
          <el-option label="待核销" value="20"></el-option>
          <el-option label="已失效" value="99"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="支付状态：" prop="payStatus">
        <el-select v-model="ruleForm.payStatus" placeholder="支付状态" clearable @change="handlePayStatusChange">
          <el-option label="已支付" value="0"></el-option>
          <el-option label="待支付" value="1"></el-option>
          <el-option label="已取消" value="2"></el-option>
          <el-option label="退款中" value="3"></el-option>
          <el-option label="退款成功" value="4"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="省：" class="w100" prop="province">
        <el-select clearable v-model="ruleForm.province" placeholder="请选择省" @change="handleProvinceChange">
          <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.provinceId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="市：" class="w100" prop="city">
        <el-select clearable v-model="ruleForm.city" placeholder="请选择市" @change="handleCityChange">
          <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.cityId"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="区：" class="w100" prop="cityProper">
        <el-select clearable v-model="ruleForm.cityProper" placeholder="请选择区" @change="handleProperChange">
          <el-option v-for="item in properOptions" :key="item.id" :label="item.name" :value="item.countyId"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="日期：">
        <el-select v-model="ruleForm.type" placeholder="请选择创建时间" class="mr20" clearable @change="handleTypeChange">
          <el-option label="创建时间" value="1"></el-option>
          <el-option label="支付时间" value="2"></el-option>
          <el-option label="核销时间" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item prop="date" class="w260">
        <el-date-picker v-model="ruleForm.date" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleTimeChange">
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" size="mini" @click="handleBtnClick('search')">查询</el-button>
        <el-button plain size="mini" @click="handleBtnClick('ruleForm')">重置</el-button>
      </el-form-item>

      <el-form-item>
        <!-- <el-button type="info" size="mini" @click="handleBtnClick('export')">导出</el-button> -->
        <!-- <form action="http://jxjf-gs.com/ccb/order/common/export/sql" method="get" class="pr-submit-export">
          <input type="submit" value="导出222" />
        </form> -->

        <!-- 导出 -->
        <form action="http://jxjf-gs.com/ccb/order/common/export/sql" method="get" class="pr-submit-export">
          <input type="hidden" v-model="subcitProper" name="citProper" />
          <input type="hidden" v-model="subcity" name="city" />
          <input type="hidden" v-model="subcode" name="code" />
          <input type="hidden" v-model="subcodeStatus" name="codeStatus" />
          <input type="hidden" v-model="subendTime" name="endTime" />
          <input type="hidden" v-model="suborderId" name="orderId" />
          <input type="hidden" v-model="subpayStatus" name="payStatus" />
          <input type="hidden" v-model="subphone" name="phone" />
          <input type="hidden" v-model="subprovince" name="province" />
          <input type="hidden" v-model="substartTime" name="startTime" />
          <input type="hidden" v-model="subtype" name="type" />
          <input type="submit" value="导出" />
        </form>

      </el-form-item>
    </el-form>

    <el-table :data="tableData" border>
      <el-table-column prop="orderId" label="订单号" min-width='140px'></el-table-column>
      <el-table-column prop="commodity" label="商品名称" min-width='230px'></el-table-column>
      <el-table-column prop="phone" label="用户手机号" width="110"></el-table-column>

      <el-table-column prop="payCode" label="支付类型" width="200"></el-table-column>

      <el-table-column prop="code" label="加油站编号" min-width='140px'></el-table-column>
      <el-table-column prop="petrolstationname" label="加油站名称" min-width='150px'></el-table-column>
      <el-table-column prop="province" label="省"></el-table-column>
      <el-table-column prop="city" label="市"></el-table-column>
      <el-table-column prop="citproper" label="区"></el-table-column>

      <el-table-column prop="deduction" label="折扣金额"></el-table-column>
      <el-table-column prop="value" label="应付金额"></el-table-column>
      <el-table-column prop="pay" label="实付金额"></el-table-column>
      <el-table-column prop="payStatus" label="支付状态">
        <template slot-scope="scope">
          {{payStatus(scope.row.payStatus)}}
        </template>
      </el-table-column>

      <el-table-column prop="payNum" label="加汇码值" min-width='150px'> </el-table-column>
      <el-table-column prop="codeStatus" label="码值状态">
        <template slot-scope="scope">
          {{codeStatus(scope.row.codeStatus)}}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width='160px'></el-table-column>

      <el-table-column prop="payTime" label="支付时间" width='160px'></el-table-column>
      <el-table-column prop="veriftyTime" label="核销时间" width='160px'></el-table-column>
      <el-table-column prop="operation" label="操作人"></el-table-column>

      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <el-button @click="handleOperaClick(scope.row, 'detail')" type="text" size="small">查看</el-button>
          <el-button @click="handleOperaClick(scope.row, 'refund')" type="text" size="small" v-if="userName == 'admin' && scope.row.codeStatus==20 && scope.row.payStatus =='0'">
            退款</el-button>
          <el-button @click="handleOperaClick(scope.row, 'again')" type="text" size="small" v-if="userName == 'admin' && scope.row.codeStatus==20 && scope.row.payStatus =='0'">
            重发短信</el-button>
          <!-- 退款、重发短信 = 支付成功 &&　待核销　展示 -->
        </template>
      </el-table-column>
    </el-table>

    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="100" layout="total, prev, pager, next" :hide-on-single-page="true"
      :total="total">
    </el-pagination>
    <!-- 退款、重发短信 确认弹窗 -->
    <el-dialog :title="title" :visible.sync="dialogVisible" width="30%">
      <span>{{dialogContent}}</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleParamClick">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dayjs from 'dayjs'
import urls from '@/api/urls'
import { getData, postData } from '@/api/'

export default {
  name: 'orderList',
  props: {},
  components: {},
  data() {
    return {
      total: 0,
      flag: '', // 退款 与 重发短信
      title: '退款',
      refundOrder: '', // 退款使用 - 订单id
      dialogContent: '确认退款吗？',
      dialogVisible: false,
      ruleForm: { // 订单查询参数
        date: '', // 
        phone: '', // 手机号 支持模糊查询
        orderId: '', // 订单id 支持模糊查询
        code: '',
        type: '', // 1->创建时间 2->支付时间 3->核销时间

        payStatus: '', // 支付状态
        codeStatus: '', // 码值状态
        startTime: '', // 开始时间
        endTime: '', // 结束时间

        city: '', // 市
        cityProper: '', // 区
        province: '',

        pageNum: 1, // 当前页
        pageSize: 100, // 每页条数
      },

      cityOptions: [],
      properOptions: [],
      provinceOptions: [],

      tableData: [],
      // 提交使用
      subcitProper: '',
      subcity: '',
      subcode: '',
      subcodeStatus: '',
      subendTime: '',
      suborderId: '',
      subpayStatus: '',
      subphone: '',
      subprovince: '',
      substartTime: '',
      subtype: '',
      userName: localStorage.getItem('userName')
    }
  },
  watch: {},
  created() {
    this.getProvince() // 省
    this.getList()
  },
  mounted() {

  },
  methods: {
    /**
     *@Description
     *@Return 切换时间类型.
     **/
    handleTypeChange(e) {
      this.subtype = e
      console.log(e, this.ruleForm)
    },
    /**
     *@Description
     *@Return 切换时间 选择.
     **/
    handleTimeChange(e) {
      this.ruleForm.startTime = dayjs(e[0]).format('YYYY-MM-DD') // 开始时间
      this.ruleForm.endTime = dayjs(e[1]).format('YYYY-MM-DD') // 结束时间
      this.substartTime = dayjs(e[0]).format('YYYY-MM-DD') // 开始时间 - 导出使用
      this.subendTime = dayjs(e[1]).format('YYYY-MM-DD') // 结束时间 - 导出使用
    },
    payStatus(status) {
      if (status == '0') {
        return '已支付'
      } else if (status == '1') {
        return '待支付'
      } else if (status == '2') {
        return '已取消'
      } else if (status == '3') {
        return '退款中'
      } else if (status == '4') {
        return '退款成功'
      }
    },
    codeStatus(status) {
      if (status == '50') {
        return '已核销'
      } else if (status == '20') {
        return '待核销'
      } else if (status == '99') {
        return '已失效'
      }
    },
    /**
     *@Description
     *@Return 查询 -- 导出.
     **/
    handleBtnClick(type) {
      if (type === 'search') {
        this.ruleForm.pageNum = 1
        this.getList()
      } else if (type === 'export') {
        this.exportFn()
      } else {

        this.$refs['ruleForm'].resetFields();

        this.ruleForm.phone = '' // 手机号 支持模糊查询
        this.ruleForm.orderId = '' // 订单id 支持模糊查询
        this.ruleForm.code = ''
        this.ruleForm.type = '' // 1->创建时间 2->支付时间 3->核销时间
        this.ruleForm.payStatus = '' // 支付状态
        this.ruleForm.codeStatus = '' // 码值状态
        this.ruleForm.startTime = '' // 开始时间
        this.ruleForm.endTime = '' // 结束时间
        this.ruleForm.city = '' // 市
        this.ruleForm.cityProper = '' // 区
        this.ruleForm.province = ''
        this.ruleForm.pageNum = 1
        this.getList()
      }
    },
    /**
     *@Description
     *@Return 操作项 - 查看.
     **/
    handleOperaClick(data, type) {
      console.log('data-------------', data)
      this.refundOrder = data.orderId // 重发短信和退款 - 参数
      switch (type) {
        case 'detail':
          this.$router.push({ name: 'OrderDetail', params: { id: data.id } })
          break;
        case 'refund':
          this.flag = 'refund'
          this.title = '退款'
          this.dialogContent = '确认退款吗？'
          this.dialogVisible = true
          break;
        case 'again':
          this.flag = 'again'
          this.title = '重发短信'
          this.dialogContent = '确认重发短信吗？'
          this.dialogVisible = true
          break;
      }
    },
    /**
    *@Description
    *@Return 重发短信 - 退款 确定事件.
    **/
    handleParamClick() {
      if (this.flag === 'refund') {
        getData({ orderId: this.refundOrder }, urls.refundUrl).then(res => {
          this.$message.success('确认退款成功！')
          this.dialogVisible = false
          this.getList()
        })
      }
      if (this.flag === 'again') {
        getData({ orderIde: this.refundOrder }, urls.againUrl).then(res => {
          this.$message.success('重发短信成功！')
          this.dialogVisible = false
          this.getList()
        })
      }
    },

    /**
     *@Description
     *@Return 订单详情列表查询.
     **/
    getList() {
      console.log('this.ruleForm--------', this.ruleForm)
      const params = JSON.parse(JSON.stringify(this.ruleForm))

      const province = this.provinceOptions.filter(val => { return val.provinceId == this.ruleForm.province })[0]
      const city = this.cityOptions.filter(val => { return val.cityId == this.ruleForm.city })[0]
      const cityProper = this.properOptions.filter(val => { return val.countyId == this.ruleForm.cityProper })[0]
      params.province = province && province.name || ''
      params.city = city && city.name || ''
      params.citProper = cityProper && cityProper.name || ''
      delete params.date
      console.log('params-----------', params)

      getData(params, urls.orderListUrl).then(res => {
        if (res.code == 500) {
          this.$message.warning(res.message)
        } else {
          this.tableData = res.result && res.result.data
          this.total = res.result && res.result.total || 0
        }
        console.log('订单详情列表查询----', res)
      })
    },
    /**
     *@Description
     *@Return 订单详情列表 -- 导出.
     **/
    exportFn() {

      getData({}, urls.exportSqlUrl).then(res => {
        console.log('导出')
      })
    },
    /**
     *@Description
     *@Return 分页事件.
     **/
    handleCurrentChange(val) {
      this.ruleForm.pageNum = val
      this.getList()
    },
    handleSizeChange() { },
    /**
   *@Description
    *@Return区域查询 - 省 - 市 - 切换 查询直接下级.
    **/
    handleProvinceChange(e) {
      console.log(e)
      const province = this.provinceOptions.filter(val => { return val.provinceId == this.ruleForm.province })[0]
      this.subprovince = province && province.name || ''
      this.getCity(e) // 市
    },
    handleCityChange(e) {
      console.log(e)
      const city = this.cityOptions.filter(val => { return val.cityId == this.ruleForm.city })[0]
      this.subcity = city && city.name || ''
      this.getProper(e) // 区
    },
    handleProperChange(e) {
      console.log(e)
      const cityProper = this.properOptions.filter(val => { return val.countyId == this.ruleForm.cityProper })[0]
      this.subcitProper = cityProper && cityProper.name || ''
    },
    /**
     *@Description
     *@Return区域查询 - 省 - 市 - 县.
     **/
    getProvince() {
      getData({}, urls.provinceUrl).then(res => {
        this.provinceOptions = res.data
        console.log('省----', res)
      })
    },
    getCity(provinceId) {
      getData({ provinceId }, urls.cityUrl).then(res => {
        this.cityOptions = res.data
        this.ruleForm.city = '' // 市
        this.ruleForm.cityProper = '' // 区
        console.log('市----', res)
      })
    },
    getProper(cityId) {
      getData({ cityId }, urls.properUrl).then(res => {
        this.properOptions = res.data
        this.ruleForm.cityProper = '' // 区
        console.log('区----', res)
      })
    },
    // 以下方法皆为 兼容 导出 参数 所做
    /**
     *@Description
     *@Return code.
     **/
    handleCodeChange(e) {
      this.subcode = e
      console.log(e)
    },
    handleCodeStatusChange(e) {
      this.subcodeStatus = e
      console.log(e)
    },
    handlePayStatusChange(e) {
      this.subpayStatus = e
      console.log(e)
    },
    handleOrderChange(e) {
      this.suborderId = e
      console.log(e)
    },
    handlePhoneChange(e) {
      this.subphone = e
      console.log(e)
    }

  }
}

</script>
<style lang="scss" scoped="scoped">
.w260 {
  width: 260px;
}
// element - ui 样式重置
::v-deep .el-input__inner {
  height: 30px !important;
  line-height: 30px !important;
}
::v-deep .el-range-editor.el-input__inner {
  padding: 0 10px !important;
}
::v-deep .el-form-item {
  margin-bottom: 10px !important;
}
::v-deep .el-form--inline .el-form-item__content {
  width: 140px;
}
::v-deep .el-date-editor .el-range-separator {
  padding: 0 10px !important;
}
::v-deep .el-date-editor--daterange.el-input__inner {
  width: 250px !important;
}
// table
::v-deep .el-table td,
::v-deep .el-table th {
  padding: 5px 0 !important;
}
</style>
